<template>
  <div id="communityPharmacy" class="person-detail">
    <div>
      <van-nav-bar title="社区药房" :fixed="true" left-arrow @click-left="back" />
    </div>
    <div class="communityPharmacy-body">
      <van-pull-refresh v-model="isLoading" success-text="刷新成功" @refresh="onRefresh">
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
          <div v-for="(item, index) in healthDetais" :key="index">
            <div class="communityHealth-list">
              <van-image :src="item.headImage" alt="" round width="1.5rem" height="1.5rem" />
              <div class="communityHealth-list-details">
                <p>
                  {{ item.pharmacyName }}
                  <span v-if="item.isInsurance == 1">医疗合作室</span>
                </p>
                <van-icon name="phone-o" />
                <span>电话:{{ item.contactPhone }}</span>
              </div>
            </div>
            <p>
              {{ item.description }}
            </p>
            <div class="communityHealth-imgList">
              <img v-for="(item1, index1) in item.headImage" :key="index1" :src="item1" alt="" />
            </div>
          </div>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>
<script>
  import mine from "../../../../controller/mine";
  import constant from "@/controller/constant.js";
  export default {
    name: "communityPharmacy",
    components: {},
    data() {
      return {
        count: 1,
        loading: false,
        finished: false,
        isLoading: false,
        healthDetais: []
      };
    },
    computed: {},
    created() {},
    mounted() {},
    methods: {
      onRefresh() {
        this.healthDetais = []
        this.count = 1
        this.getInfo();
      },
      onLoad() {
        this.getInfo();
      },
      getInfo() {
        let data = {
          curPage: this.count,
          pageSize: (this.count) * 5
        };
        mine.pharmacy_v1_list(data).then(res => {
          if (res.code === "0") {
            if (
              (res.datas && res.datas.records.length === 0) ||
              res.datas === null
            ) {
              this.$toast("暂无更多数据");
              this.loading = false;
              this.isLoading = false;
              this.finished = true;
              return;
            }
            this.healthDetais = [...this.healthDetais, ...res.datas.records];
            this.$nextTick(() => {
              this.loading = false;
              this.isLoading = false;
            });
            if (res.datas.records.length < (this.count) * 5) {
              this.finished = true;
            }
          } else {
            if (res && res.msg) {
              this.$toast(res.msg);
            } else {
              this.$toast(constant.unusualMsg);
            }
          }
        });
      },
      back() {
        this.$router.go(-1);
      }
    }
  };
</script>
<style lang="scss" scoped>
  #communityPharmacy {
    p {
      margin: 5px 0;
    }

    background: #fff;

    .communityHealth-list {
      display: flex;
      margin-top: 10px;
    }

    .communityHealth-list-details {
      margin-left: 10px;

      >p {
        height: 20px;
        font-size: 16px;
        font-weight: bold;

        >span {
          background: rgba(220, 70, 48, 0.1);
          border: 1px solid rgba(220, 70, 48, 0.5);
          border-radius: 10px;
          color: #dc4630;
          font-size: 12px;
          padding: 2px 5px;
        }
      }
    }

    .communityPharmacy-body {
      padding: 20px;

      >div {
        border-bottom: 1px solid #e2e2e2;
        padding: 0 0 10px 0;
      }
    }

    .communityHealth-imgList {
      img {
        width: 100px;
        height: 100px;
        margin-left: 10px;
      }
    }
  }
</style>